<template>
	<view>
		<u-navbar title-size="34" title="图片创作" back-icon-color="#292940" title-color="#292940" :border-bottom="false"
			:custom-back="tui.goBack" placeholder></u-navbar>
		<view class="content">

			<view class="upload-box" :style="{height:imgHeight *2 +'upx'}">
				<view class="slot-btn" v-if="file == ''" @click="uploadImage">
					<image class="mx-auto" src="/static/creation/upload.png">
					</image>
				</view>
				<view class='slot-tip text-center' v-if="file == ''">
					<view class="text-CCCDD5 fz-26">请上传不大于10MB的JPG或者PNG图片</view>
				</view>
				<image id="editor" v-if="file" :src="file" mode="widthFix" class="upload-box-works"></image>
				<view v-if="file" class="position-absolute reset-pos">
					<view class="mt-3 d-flex justify-content-center align-items-center reset-btn" @click="uploadImage">
						<image class="up-icon" src="/static/creation/Photograph.png"></image>
						<view class="text-F8F9FA fz-22 z-index-3">重新上传</view>
					</view>
				</view>
			</view>
			<view class="item">
				<label class="fz-30 text-292940">作品名称</label>
				<u-form-item style="padding: 5px 0  !important;">
					<u-input type="text" v-model="name" style="color:#343A40;font-size:30upx" placeholder="请输入作品名称"
						placeholder-style="color:#CED4DA; font-size:30upx" />
				</u-form-item>
			</view>
			<view class="d-flex justify-content-between align-items-center setting-list">
				<view class="text-292940 fz-30">类型</view>
				<view class="d-flex justify-content-right setting-right" @click="show = true">
					<view class=" text-CCCDD5 fz-30" v-if="type==''">请选择类型</view>
					<view class="text-292940 fz-30" v-else>{{type}}</view>
					<view class="arrow-icon">
						<image src='/static/mine/me-more.png'></image>
					</view>
				</view>
			</view>

			<view class="d-flex justify-content-between align-items-center setting-list" @click="albumShow = true">
				<view class="text-292940 fz-30">专辑</view>
				<view class="d-flex justify-content-right setting-right">
					<view class=" text-CCCDD5 fz-30" v-if="albumType==''">请选择专辑</view>
					<view class="text-292940 fz-30" v-else>{{albumType}}</view>
					<view class="arrow-icon">
						<image src='/static/mine/me-more.png'></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box d-flex justify-content-between align-items-center">
			<view class="d-flex align-items-center justify-content-between" style="flex:1">
				<u-button :loading="saveLoading" hover-class="none" class="text-ffffff fz-32 btn-submit btn-style save-bg" @click="save">
					保存</u-button>
				<u-button hover-class="none" class="text-ffffff fz-32 btn-submit btn-style casting-bg"
					@click="cast">
					铸造</u-button>
			</view>
		</view>
		<u-select v-model="show" :list="categoryList" :default-value="defaultValue" @confirm="confirm" cancel-color="#292940" confirm-color="#292940">
		</u-select>
		<u-select v-model="albumShow" :list="albumList" :default-value="defaultValueAlbum" @confirm="confirmAlbum" cancel-color="#292940"
			confirm-color="#292940"></u-select>
		<u-popup v-model="popAddAlbumShow" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="title">
					铸造作品
				</view>
				<view class="item">
					<label class="text-36363A fz-32">铸造数量</label>
					<u-input v-model="count" :focus="popAddAlbumShow" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="铸造数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<u-button class="add-btn" :loading="castLoading" @click="casting" hover-class="none">铸造</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ossUpload from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				imgHeight: 345,
				blobUrl: '',
				file: '',
				name: '',
				count:1,//作品数量
				type: '',
				albumType:'',
				show: false,
				albumShow: false,
				popAddAlbumShow: false,
				albumName: '',
				customStyle: {
					fontSize: '32upx'
				},
				defaultValue:[0],
				defaultValueAlbum:[0],
				category_index:'',
				album_index:'',
				saveLoading:false,
				castLoading:false
			}
		},
		watch:{
			//强制正整数
			count(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.count = val.replace(/^(0+)|[^\d]+/g,'')
					})
				}
			}
		},
		computed: {
			//类型列表
			categoryList() {
				let arr = []
				let list = this.$store.state.works.categoryList
				for (let i in list) {
					arr.push({
						value: list[i].id,
						label: list[i].name,
						extra: i
					})
				}
				return arr
			},
			//专辑列表
			albumList() {
				let arr = []
				let list = this.$store.state.user.albumList
				for (let i in list) {
					arr.push({
						value: list[i].id,
						label: list[i].name,
						extra: i
					})
				}
				return arr
			},
		},
		methods: {
			//验证
			verification(){
				if(this.file === ''){
					uni.$u.toast('请上传作品')
					return false
				}
				if(this.name === ''){
					uni.$u.toast('请输入作品名称')
					return false
				}
				if(this.type === ''){
					uni.$u.toast('请选择类型')
					return false
				}
				if(this.albumType === ''){
					uni.$u.toast('请选择专辑')
					return false
				}
				return true
			},
			//保存
			save(){
				if(this.verification()){
					let param = {
						name:this.name,
						category_id:this.categoryList[this.category_index].value,
						file:this.file,
						album_id:this.albumList[this.album_index].value
					}
					this.saveLoading = true
					this.$store.dispatch('works/workStore',param).then(res=>{
						this.saveLoading = false
						this.getDraftList()
						uni.$u.toast('创作成功')
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/secondary/mine/creation'
							})
						},1000)
					}).catch(error=>{
						this.saveLoading = false
					})
				}
			},
			//铸造
			cast(){
				if(this.verification()){
					this.popAddAlbumShow = true
				}
			},
			casting(){
				if(this.count === ''){
					return uni.$u.toast('请输入铸造数量')
				}
				
				let param = {
					name:this.name,
					type:1,
					category_id:this.categoryList[this.category_index].value,
					file:this.file,
					album_id:this.albumList[this.album_index].value
				}
				this.castLoading = true
				this.$store.dispatch('works/workStore',param).then(res=>{
					this.$store.dispatch('works/workMint',{work_id:res.data.id,count:this.count}).then(ress=>{
						this.castLoading = false
						this.popAddAlbumShow = false
						this.getCastList()
						uni.$u.toast('铸造成功')
					}).catch(error=>{
						this.popAddAlbumShow = false
						this.castLoading = false
					})
				}).catch(error=>{
					this.castLoading = false
				})
			},
			confirm(e) {
				this.type = e[0].label || ''
				this.category_index = Number(e[0].extra)
				this.defaultValue = [this.category_index]
			},
			confirmAlbum(e) {
				this.albumType = e[0].label || ''
				this.album_index = Number(e[0].extra)
				this.defaultValueAlbum = [this.album_index]
			},
			//上传作品[图片]
			uploadImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (tempRes) => {
						let size = tempRes.tempFiles[0].size
						if (size > 10 * 1024 * 1024) {
							return uni.$u.toast('上传图片大于10MB,请重新上传')
						}
						// #ifdef H5
						//网页端获取文件类型
						this.fileType = tempRes.tempFiles[0].name.substring(tempRes.tempFiles[0].name
							.lastIndexOf(".") + 1);
						// #endif
						//获取上传文件blob地址
						this.blobUrl = tempRes.tempFilePaths[0]
						ossUpload(this.blobUrl, this.fileType, result => {
							this.file = result
							setTimeout(() => {
								const dateEditor = uni.createSelectorQuery().in(this).select(
									"#editor")
								dateEditor.boundingClientRect(rect => {
									this.imgHeight = rect.height
								}).exec()
							}, 300)
						})
					}
				})
			},
			//获取铸造列表
			getCastList(){
				//重置上一页搜索,并重新获取列表数据
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2];// 上级页面实例
				prevPage.$vm.keyword = ''
				prevPage.$vm.searchKeyword = ''
				this.$store.dispatch('works/work',{status:1,page:1}).then(res=>{
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/secondary/mine/creation'
						})
					},500)
				})
			},
			//获取草稿列表
			getDraftList(){
				this.$store.dispatch('works/work',{status:0}).then(res=>{})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40upx 30upx 200upx 30upx;
		box-sizing: border-box;

		.upload-box {
			width: 690upx;
			height: 690upx;
			margin: 0 auto;
			background: #F8F9FA;
			position: relative;
			overflow: hidden;
			border-radius: 16upx;
			border: 2upx dashed #DEE2E6;
			display: flex;
			justify-content: center;
			transition: 0.3s;

			.upload-box-works {
				width: 100%;
				height: 100%;
			}

			.slot-btn {
				width: 120upx;
				height: 120upx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 50%;
				top: 215upx;

				image {
					width: 120upx;
					height: 120upx;
				}

			}

			.slot-tip {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 50%;
				top: 358upx;
			}

			.upload-padding {
				padding: 0 0 75upx 0;

				.upIcon {
					position: absolute;
					right: 100upx;
					top: 20upx;
					z-index: 99999;
				}
			}

			/deep/ .u-list-item {
				background: rgba(255, 255, 255, 0) !important;
				margin: 0;
			}

			/deep/ .u-icon {
				color: rgba(255, 255, 255, 0);
			}

			/deep/ .u-preview-wrap {
				border: none;
			}

		}

	}

	.item {
		width: 100%;
		margin-top: 58upx;

		label {
			display: block;
			width: 100%;
		}
	}

	.btn-box {
		padding: 22upx 0 22upx 26upx;
		width: 100%;
		position: fixed;
		bottom: var(--window-bottom);
		background: #FFFFFF;
		z-index: 99;
		.delete-box {
			width: 70upx;
			margin-right: 6upx;

			.delete-icon {
				width: 35upx;
				height: 35upx;
				margin: 0 auto;
				margin-bottom: 18upx;

				image {
					width: 35upx;
					height: 35upx;
					vertical-align: top;
				}
			}
		}

		.btn-style {
			width: 290upx;
			height: 84upx !important;
			border-radius: 49upx;
		}

		.save-bg {
			background: #292940;
		}

		.casting-bg {
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		}
	}

	.setting-list {
		width: 100%;
		height: 116upx;
		border-bottom: 1px solid rgba(216, 222, 228, 0.4);

		.setting-right {
			height: 116upx;
			align-items: center;

			span {
				display: inline-block;
				width: 12upx;
				height: 12upx;
				background: #FF4D4F;
				border-radius: 100%;
				//margin-right: 10upx;
			}

			.user-name {
				font-size: 30upx;
				color: #999999;
			}
		}

		.arrow-icon {
			width: 28upx;
			height: 28upx;
			margin-left: 10upx;

			image {
				width: 28upx;
				height: 28upx;
				vertical-align: top;
			}
		}

		/deep/.u-badge--dot {
			width: 12upx;
			height: 12upx;
			margin-top: 4upx;
		}

	}

	.user-info {
		height: 180upx;
	}

	.setting-border {
		border-bottom: 1upx solid rgba(216, 222, 228, .8);
	}

	.avatar-img {
		width: 98upx;
		height: 98upx;

		image {
			width: 98upx;
			height: 98upx;
			vertical-align: top;
		}

	}

	.album-box {
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;

		.title {
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}

		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 60upx;
			color: #292940;
			font-size: 36upx;

			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
		}

		.add-btn {
			width: 544upx;
			height: 98upx;
			background: #292940 !important;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}

	}

	.reset-pos {
		bottom: 28upx;
	}

	.reset-btn {
		max-width: 240upx;
		display: inline;
		height: 50upx;
		background: rgba(000, 000, 000, 0.35);
		border-radius: 25upx;
		padding: 0 22upx;
		z-index: 99;

		.up-icon {
			width: 32upx;
			height: 32upx;
			margin-right: 10upx;
			vertical-align: top;
		}

	}
</style>
